import React, { useEffect, useState } from 'react'
import "./App.css"
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"


export default function App() {
  //状态提升,把数组放在父组件中,通过父子通信,所有子兄弟组件都可以使用
  //初始化
  const [todoList,setTodoList] = useState([])
  // let todoListInit = []

  //刚渲染App时,去本地存储中是否保存数据
  /*
  localStorage中只能存储字符串,
  -添加数据的方法setItem, 
  -查找数据的方法getItem, 
  -逐条删除数据的方法removeItem,
  -清空所有数据的方法clear
  */
 //初始化页面时查询本地存储中是否有数据,如果没有就返回一个空数组接收数据,如果本地存储的是空值,则返回null
  useEffect(() => {
    // console.log(localStorage.getItem("todoList",todoList));
    //使用本地存储的数据时,需要把字符串类型的数据转成对象,便于使用
    // todoListInit = JSON.parse(localStorage.getItem("todoList") || [])

    //JSON.parse中必须传一个字符串,否则会报Unexpected token o in JSON at position 1
    
    setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
    // console.log(1);
  },[])

   

  //监听todoList的状态,一旦有数据就保存在localStorage中,需要把数据转成字符串进行存储
  useEffect(() => {
    localStorage.setItem("todoList",JSON.stringify(todoList))
    // console.log(2);
  },[todoList])

  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header setTodoList={setTodoList} todoList={todoList}/>
      <List todoList={todoList} setTodoList={setTodoList}/>
      <Footer todoList={todoList} setTodoList={setTodoList}/>
    </div>
  </div>
  )
}